import React, { Component } from 'react';
import { Card, Input, Button, DatePicker } from 'antd';
import style from './index.css';
import ImageDragger from '@/components/ImageDragger';
import BaseComponent from '@/components/BaseComponent';
import { connect } from 'dva';
import { njzdImgPrefixUrl } from '@/defaultSettings';
import DraggerDrawer from './DraggerDrawer';
import moment from 'moment';
@connect(({ user }) => ({
  // data: risk.riskData,
  currentUser: user.currentUser,
}))
export default class index extends BaseComponent {
  constructor(props) {
    super(props);
    this.state = {
      visible: false,
      isUploading: false,
      form: {},
    };
  }
  screeningYearChange = e => {

    const value = e;
    this.setState(params => ({
      form: {
        ...params.form,
        screeningYear: value,
      },
    }), () => {
      this.show('1')
      this.show('2')

    });
  };

  institutionNameChange = e => {
    const value = e.target.value;
    this.setState(params => ({
      form: {
        ...params.form,
        institutionName: value,
      },
    }));
  };

  componentDidMount() {
    this.show('1');
    this.show('2');
  }
  saveClick = () => {
    const {
      writtenConsentUrl,
      writtenConsentWorkUrl,
      writtenConsentFileWorkPath,
      writtenConsentFilePath,
      screeningYear,
    } = this.state.form;

    const wcUrl = writtenConsentUrl.join(',');
    const wcfp = writtenConsentFilePath.join(',');

    const wcwUrl = writtenConsentWorkUrl.join(',');
    const wcwfp = writtenConsentFileWorkPath.join(',');

    //

    this.saveUpload(wcUrl, wcfp, screeningYear, this.props.currentUser.id, '1');
    this.saveUpload(wcwUrl, wcwfp, screeningYear, this.props.currentUser.id, '2');
  };
  saveUpload = (url, absoluteUrl, screeningYear, user, type) => {
    this.execHttp('summaryfAnnualReport/add', {
      url,
      absoluteUrl,
      screeningYear,
      user,
      type,
    }).then(resp => {
      if (resp && resp.success) {
        this.successMessage(resp.message);
      } else {
        this.errorMessage(resp.message);
      }
    });
  };
  //展示
  show = type => {
    const { form } = this.state
    const screeningYear = form.screeningYear ? moment(form.screeningYear).format("YYYY") : ''

    this.execHttp('summaryfAnnualReport/show', { user: this.props.currentUser.id, type, screeningYear: screeningYear }).then(
      resp => {
        if (resp && resp.success) {
          let data = resp.data.list[0];
       
          const absoluteUrlList = data.absolute_url ? data.absolute_url.split(',') : [];
          const urlList = data.url ? data.url.split(',') : [];

          if (type == '1') {
            // console.log(moment(resp.data.list[0].screening_year).format("YYYY"));

            // const year = new Date(resp.data.list[0].screening_year, 0, 1).getFullYear(); // 0 表示一月份
            this.setState(params => ({
              form: {
                ...params.form,
                writtenConsentFilePath: absoluteUrlList,
                writtenConsentUrl: urlList,
                screeningYear: resp.data.list[0].screening_year,
                institutionName: resp.data.list[0].institution_name,
              },
            }));
          }
          if (type == '2' && resp.data.list.length > 0) {
            this.setState(params => ({
              form: {
                ...params.form,
                writtenConsentFileWorkPath: absoluteUrlList,
                writtenConsentWorkUrl: urlList,
                // screeningYear: resp.data.list[0].screening_year
              },
            }));
          }
        }
      }
    );
  };

  // 子组件 点击提交按钮 修改对应fileList
  updateFileLsit = (target, fileList) => {
    console.log(target, fileList);
    const { form } = this.state;
    form[target[0]] = fileList.map(item => item.url);
    form[target[1]] = fileList.map(item => item.absolute_url);
    console.log(target[0], target[1]);

    console.log(form[target[0]], form[target[1]]);
    this.setState({
      form,
    });
  };

  render() {
    const { form } = this.state;
    let writtenConsentUrl = [];
    let writtenConsentWorkUrl = [];

    if (form.writtenConsentUrl) {
      writtenConsentUrl = [...form.writtenConsentUrl];
    }
    if (form.writtenConsentWorkUrl) {
      writtenConsentWorkUrl = [...form.writtenConsentWorkUrl];
    }
    return (
      <div>
        <Card size='small' title="工作照片" style={{ width: '100%' }}>
          <div className={style.content}>
            <div className={style.header}>
              <div className={style.headerItem}>机构名称</div>
              <div className={style.headerItemInput}>
                <Input
                  placeholder="请输入机构名称"
                  value={this.state.form.institutionName}
                  onChange={this.institutionNameChange}
                  style={{ width: 200 }}
                />
              </div>
              <div className={style.headerItem}>筛查年度</div>
              <div className={style.headerItemInput} style={{width:"100%"}}>
               
                <DatePicker placeholder="请输入筛查年度"
                  mode="year" format="YYYY"
                  value={moment(this.state.form.screeningYear, "YYYY")}
                  onPanelChange={this.screeningYearChange}

                ></DatePicker>
              </div>
            </div>

            <div className={style.body}>
              <div className={style.bodyItem}>
                <div className={style.bodyItemLeft}>
                  <p>
                    工作照片
                    {/* <span>（最少5张，照片大小必须在1M以上）</span> */}
                  </p>
                </div>
                <div
                  className={style.bodyItemRight}
                  style={{ display: 'flex', alignItems: 'center' }}
                >
                  {writtenConsentUrl.map((item, index) => {
                    return (
                      <img
                        key={index}
                        src={`${njzdImgPrefixUrl}${item}`}
                        style={{ width: '100px', height: '100px', margin: '5px ' }}
                      />
                    );
                  })}
                  <DraggerDrawer
                    imgSumbit={this.updateFileLsit}
                    targetName={['writtenConsentUrl', 'writtenConsentFilePath']}
                  />
                </div>
              </div>
              <div className={style.bodyItem}>
                <div className={style.bodyItemLeft}>
                  <p>年度工作报表（核对无误后盖章上传）</p>
                </div>
                <div
                  className={style.bodyItemRight}
                  style={{ display: 'flex', alignItems: 'center', flexWrap: 'wrap' }}
                >
                  {writtenConsentWorkUrl.map((item, index) => {
                    return (
                      <img
                        key={index}
                        src={`${njzdImgPrefixUrl}${item}`}
                        style={{ width: '100px', height: '100px', margin: '5px ' }}
                      />
                    );
                  })}
                  <DraggerDrawer
                    imgSumbit={this.updateFileLsit}
                    targetName={['writtenConsentWorkUrl', 'writtenConsentFileWorkPath']}
                  />
                </div>
              </div>
            </div>
          </div>
          <Button type="primary" onClick={this.saveClick} style={{ marginTop: '20px' }}>
            确定
          </Button>
        </Card>
      </div>
    );
  }
}
